<template>
    <div class="module-box">
        <!-- 侧边的导航bar -->
        <div class="left-menu-box">
            <left-menu :menu-list="menuList" />
        </div>
        <!-- 预报模块内容部分 -->
        <div class="right-content">
            <router-view />
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            menuList: [
                {
                    name: '实况资料',
                    routerName: 'ObsData',
                    iconPath: require('assets/image/menu/obs-icon.png'),
                    iconActivePath: require('assets/image/menu/obs-icon-active.png')
                },
                {
                    name: '预报资料',
                    routerName: 'ForecastData',
                    iconPath: require('assets/image/menu/forecast-data.png'),
                    iconActivePath: require('assets/image/menu/forecast-data-active.png')
                },
                {
                    name: '综合图',
                    routerName: 'CompositeImage',
                    iconPath: require('assets/image/menu/composite-image.png'),
                    iconActivePath: require('assets/image/menu/composite-image-active.png')
                }
            ]
        }
    }
}
</script>
<style scoped lang="scss">
.module-box {
    background-image: url('~assets/image/module-box-bg.png');
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    padding-top: 15px;
    box-sizing: border-box;

    .left-menu-box {
        height: 100%;
        background-color: transparent;
        box-sizing: border-box;
        border-right: 2px solid;
        border-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, #0263B4 50%, rgba(128, 128, 128, 0) 100%) 1;
        margin-right: 15px;
    }

    .right-content {
        width: calc(100% - 65px);
        height: 100%;
        background-color: transparent;
    }
}
</style>